import {Menu} from "antd";
import React from 'react';
import {
    CodepenOutlined, DatabaseOutlined,
    MailOutlined,
    SettingOutlined,
    UsergroupAddOutlined,
    VideoCameraOutlined
} from "@ant-design/icons";
import {useNavigate} from "react-router-dom";

/**
 * 导航栏
 * @param props
 * @returns {JSX.Element}
 * @constructor
 */
const Navs = (props) => {
    const navigate = useNavigate();
    return (
        <Menu
            theme="light"
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['0']}
            mode="inline"
            items={
                [
                    {
                        key: '0',
                        icon: <MailOutlined/>,
                        label: "菜单栏导航",
                        children: [
                            {
                                key: '1',
                                label: "设备列表",
                                icon: <CodepenOutlined/>,
                                onClick: () => {
                                    navigate('/');
                                }
                            },
                            {
                                key: '2',
                                label: "数据列表",
                                icon: <DatabaseOutlined />,
                                onClick: () => {
                                    navigate('/data');
                                }
                            },
                            {
                                key: '3',
                                label: "监控列表",
                                icon: <VideoCameraOutlined/>,
                                onClick: () => {
                                    navigate('/monitor');
                                }
                            },
                            {
                                key: '4',
                                label: "系统用户",
                                icon: <UsergroupAddOutlined/>,
                                onClick: () => {
                                    navigate('/user');
                                }
                            }
                        ]
                    }
                ]
            }
        >
        </Menu>
    )
}

export default Navs;